export const addCommonSearch = (editor) => {
    const {
        Components
    } = editor;
    Components.addType('addCommonSearch', {
        model: {
            defaults: {
                name: 'addCommonSearch',
                droppable: true,
                attributes: {
                    'data-gjs-type':'addCommonSearch'
                },
                components: [{
                    type: 'div',
                    attributes: {
                        class: 'common-search-div'
                    },
                    components: [{
                        tagName:'input',
                        attributes: {
                            class: 'common-search',tabindex:"0",type:"text",
                            placeholder:"请输入搜索关键词"
                        },
                    },
                    {
                        type:'image',
                        attributes: {
                            class: 'common-search-img',
                            src:'https://ts1.cn.mm.bing.net/th/id/R-C.bf5e6bcabaaa8143e41ce10c63d5bd79?rik=fEgSv7W2WL%2bhbg&riu=http%3a%2f%2ficon.chrafz.com%2fuploads%2fallimg%2f170119%2f1-1F1191335510-L.png&ehk=UGOqdbbRrVRodnBwCyG7i7dgq3%2b2pmT6OpqYL3u%2bjBA%3d&risl=&pid=ImgRaw&r=0'
                        },
                    }],
                },
                {
                    type: 'div',
                    attributes: {
                        class: 'common-search-history'
                    },
                }],
                script() {
                    var thx = document.getElementById(this.attributes.id.value);
                    let history = [
                        {inputContent:'金银花',resultCount:'100'},
                        {inputContent:'扑克牌',resultCount:'100'},
                        {inputContent:'水藻',resultCount:'100'},
                        {inputContent:'金元宝',resultCount:'100'},
                        {inputContent:'teamco',resultCount:'100'},
                        {inputContent:'达索',resultCount:'100'},
                        {inputContent:'艾三维',resultCount:'100'},
                        {inputContent:'今日说法',resultCount:'100'},
                        {inputContent:'产品介绍，请给我一套最简单的方案',resultCount:'100'},
                        {inputContent:'流式布局',resultCount:'100'},
                        {inputContent:'响应式',resultCount:'100'},
                        {inputContent:'商品价位',resultCount:'100'},
                        {inputContent:'数码产品',resultCount:'100'},
                        {inputContent:'产品的维护和售后',resultCount:'100'},
                        {inputContent:'产品有没有更详细的介绍',resultCount:'100'},
                        {inputContent:'艾三维技术',resultCount:'100'},
                    ]
            
                    let searchInput = thx.getElementsByClassName('common-search')[0];
                    let searchBtn = thx.getElementsByClassName('common-search-img')[0];
                    let historyBox = thx.getElementsByClassName('common-search-history')[0];
            
                    // 搜索按钮点击
                    searchBtn.onclick = () =>{
                        const key = searchInput.value;
                        if(key === ''){
                            alert('输入内容不能为空！');
                        } else {
                            history.push({inputContent:key,resultCount:'100'})
                            alert(`搜索的内容为${key}`)
                        }
                    }
            
                    // 输入框点击
                    searchInput.onfocus = () =>{
                        searchInput.placeholder = '';
                    }
            
                    let curInput = null;
            
                    // 监听输入
                    searchInput.oninput = ()=>{
                        historyBox.style.display='flex';
                        let xx = searchInput.value.trim();
                        setTimeout(function() {
                            if(xx===''||xx.startsWith(curInput)){
                                curInput = xx;
                                return;
                            }
                            curInput = xx;
                            historyBox.innerHTML = '';
                            history.filter(({inputContent,resultCount})=>{
                                if(inputContent.startsWith(xx)){
                                    let itemDiv = document.createElement('div');
                                    let itemSpan = document.createElement('span');
                                    let itemR = document.createElement('span');
                                    itemDiv.classList.add('common-search-history-item');
                                    itemR.classList.add('common-search-resultCount');
                                    itemDiv.dataset.text = inputContent;
                                    itemSpan.dataset.text = inputContent;
                                    itemR.dataset.text = inputContent;
                                    itemSpan.innerText = inputContent;
                                    itemR.innerText = `${resultCount}个结果`;
                                    itemDiv.appendChild(itemSpan);
                                    itemDiv.appendChild(itemR);
                                    historyBox.appendChild(itemDiv);
                                    return true;
                                }else{
                                    return false;
                                }
                            });
                            // for(let i = 0; i < history.length; i++) {
                            //     // result.push(aim.find(item => item.name = nameArr[i]))
                                
                            // }
                        },500)
                    }
            
                    // 输入框失焦
                    searchInput.onblur = () =>{
                        setTimeout(function() {
                            historyBox.style.display='none';
                            searchInput.placeholder = '请输入搜索关键词';
                        },70)
                    }
            
                    // 搜索提示内容被点击
                    historyBox.onclick = (e) =>{
                        searchInput.value = e.target.dataset.text;
                    }
                },
                styles: `
                    .common-search-history{
                        width: 700px;
                        display: none;
                        /* padding-top: 5px; */
                        padding: 5px;
                        flex-direction: column;
                        align-items: center;
                        margin-top: 10px;
                        border-radius: 5px;
                        box-shadow: 0 0 5px lightgray;;
                    }
                    .common-search-history-item{
                        padding: 5px;
                        font-size: 13px;
                        display: flex;
                        width: 99%;
                        height: 30px;
                        align-items: center;
                        justify-content: space-between;
                        cursor: pointer;
                    }
                    .common-search-history-item:hover{
                        background-color: rgb(240, 240, 240);
                    }
                    .common-search-resultCount{
                        color: lightgray;
                    }
                    .common-search-div{
                        padding-left: 10px;
                        width: 700px;height: 40px;
                        align-items: center;
                        flex-flow: row-reverse;
                        display: flex;
                        border-bottom: 1.5px solid lightgray;
                    }
                    .common-search-img{
                        position: absolute;
                        height: 30px;
                        width: 30px;
                        margin-right: 10px;
                        cursor: pointer;
                    }
                    .common-search{
                        margin-left: 5px;
                        color: rgb(204, 204, 204);
                        position: absolute;
                        width: 700px;
                        height: 40px;
                        padding: 3px 2px 3px 10px;
                        font-family: 微软雅黑;
                        font-weight: 400;
                        font-style: normal;
                        font-size: 13px;
                        letter-spacing: normal;
                        color: rgb(51, 51, 51);
                        text-align: left;
                        text-transform: none;
                        background-color: transparent;
                        border-color: transparent;
                        border-radius: 50px;
                    }
                    .common-search:focus{
                        box-shadow: 0 0 5px #03a9f4;
                        outline: none;
                    }
                `},
                init() {
                    
                },
        }
    });

    // 注册组件
    editor.BlockManager.add('add-commonSearch', {
        label: '普通搜索栏',
        category: '其他类',
        media: `<svg t="1720776784632" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="29487" width="30" height="30"><path d="M533.7088 341.333333H102.4a68.266667 68.266667 0 0 0-68.266667 68.266667v157.013333a68.266667 68.266667 0 0 0 68.266667 68.266667h819.2a68.266667 68.266667 0 0 0 68.266667-68.266667V409.6a68.266667 68.266667 0 0 0-68.266667-68.266667H533.7088z m383.522133 248.900267h-805.546666a34.133333 34.133333 0 0 1-34.133334-34.133333v-136.533334a34.133333 34.133333 0 0 1 34.133334-34.133333h805.546666c15.086933 0 27.306667 12.219733 27.306667 27.306667v150.186666a27.306667 27.306667 0 0 1-27.306667 27.306667z" p-id="29488"></path><path d="M170.666667 409.6a68.266667 68.266667 0 0 1 48.196266 116.599467l37.000534 38.2976c1.774933 4.778667 0.955733 8.6016-2.321067 11.537066a11.332267 11.332267 0 0 1-11.6736 2.2528l-37.2736-41.1648A68.266667 68.266667 0 1 1 170.666667 409.6z m0 20.48a47.786667 47.786667 0 1 0 0 95.573333 47.786667 47.786667 0 0 0 0-95.573333z" p-id="29489"></path></svg>`,
        content: {
            type: 'addCommonSearch'
        },
    });
};